<template>
  <div class="tab_wrap">
    <!-- @scroll="scrollFoo" -->
    <div class="comlist" ref="comlist" @scroll="getScroll">
      <ul class="tab" v-show="!isShow" ref="tab">
        <li
          v-for="(item, i) in tablist"
          :key="i"
          @click="tab(i, item.name, 0)"
          ref="li"
        >
          <router-link
            :to="`/ting/${item.name}`"
            :class="name == item.name ? 'active' : ''"
          >
            <span class="txt">{{ item.title }}</span>
            <p class="bar">
              <span class="line"></span>
            </p>
          </router-link>
        </li>
      </ul>
      <div class="tt_com" v-show="isShow">请选择分类</div>
    </div>
    <div class="box" @click="open">
      <van-icon class="arrow-up" name="arrow-up" v-if="isShow" />
      <van-icon name="arrow-down" v-else />
    </div>

    <div class="fenlei" v-if="isShow">
      <ul class="tt_box">
        <li v-for="(item, i) in tablist" :key="i" @click="tab(i, item.name, 1)">
          <router-link :to="`/ting/${item.name}`"
            >{{ item.title }}
          </router-link>
        </li>
      </ul>
    </div>

    <my-load v-if="show"></my-load>
  </div>
</template>

<script>
import { initTingData } from "@/request/api.js";
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      isShow: false,
      tablist: [],
      name: "",
      index: 0,
      delay: null,
      show: false,

      newIndex: 0,
      oldIndex: 0,
      a: 0,
    };
  },
  name: "tingtablist",
  computed: {
    ...mapState(["tingDis"]),
  },
  created() {
    this.name = this.$route.params.title;

    this.initData();
    // if(this.tingDis > 0) {
    //   if(this.$refs.comlist){
    //     this.$refs.comlist.scrollLeft = this.tingDis
    //     console.log("滚动",this.tingDis)
    //   }

    // }
  },
  watch: {
    index(newVal, oldVal) {
      this.newIndex = newVal;
      this.oldIndex = oldVal;
      console.log(this.newIndex, this.oldIndex);
    },
    isShow(val) {
      if (!val) {
        this.$nextTick(() => {
          this.$refs.comlist.scrollLeft = this.tingDis;
        });
      }
    },
    show(val) {
      if (!val) {
        this.$nextTick(() => {
          if (this.name != "renmen") {
            this.$refs.comlist.scrollLeft = this.tingDis;
          }
        });
      }
    },
  },

  methods: {
    ...mapMutations(["saveTingDis"]),
    open() {
      this.isShow = !this.isShow;
    },
    tab(i, name, flag) {
      this.isShow = false;
      if (flag == 1) {
        this.scrollFoo(i);
      }
      this.index = i;
      this.name = name;
    },
    async initData() {
      let flag = localStorage.getItem("flag");
      if (flag) {
        this.show = flag;
      }
      let { data: res } = await initTingData();
      console.log("听单", res);
      this.tablist = res.data.categories;

      if (this.tablist.length > 0) {
        this.show = false;
        localStorage.setItem("flag", this.show);
      }
    },

    scrollFoo(i) {
      this.$nextTick(() => {
        let dis = this.$refs.comlist.scrollLeft;
        let tab = this.$refs.comlist.offsetWidth - this.$refs.li[i].offsetWidth;
        console.log(tab);
        console.log("新", this.newIndex);
        console.log("旧", this.oldIndex);
        if (this.newIndex - this.oldIndex >= 4) {
          this.$refs.comlist.scrollLeft = this.$refs.li[i].offsetLeft - tab;
        } else if (this.newIndex - this.oldIndex <= -4) {
          this.$refs.comlist.scrollLeft = this.$refs.li[i].offsetLeft;
        } else {
          if (
            this.$refs.li[i].offsetLeft + this.$refs.li[i].offsetWidth >
            this.$refs.comlist.offsetWidth
          ) {
            this.$refs.comlist.scrollLeft = this.$refs.li[i].offsetLeft - tab;
          }
        }

        this.saveTingDis(this.$refs.comlist.scrollLeft);
      });
    },

    getScroll() {
      if (this.isShow) {
        return;
      } else {
        this.distance = this.$refs.comlist.scrollLeft;
        this.saveTingDis(this.$refs.comlist.scrollLeft);
      }
    },
  },
  mounted() {

    
    // console.log()
  },
};
</script>

<style lang="scss" scoped>
.comlist::-webkit-scrollbar {
  display: none;
}

.tab_wrap {
  display: flex;
  position: relative;
  .box {
    margin-top: 2px;
    height: 43px;
    width: 43px;
    border-left: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    text-align: center;
    line-height: 45px;
    color: #a3a3ac;
    font-size: 16px;
    .arrow-up {
      color: #f06742;
    }
  }

  .comlist {
    flex: 1;
    // width: 100%;
    padding-right: 44px;
    height: 45px;
    overflow-x: auto;
    border-bottom: 1px solid #e8e8e8;
    .tab {
      height: 100%;
      display: flex;
      li {
        flex-shrink: 0;
        height: 100%;
        a {
          height: 100%;
          display: block;
          padding: 0 15px;
          height: 45px;
          line-height: 45px;
          position: relative;
          transition: all 0.3s ease;
          .txt {
            color: #a3a3ac;
            font-size: 14px;
          }

          .bar {
            position: absolute;
            height: 3px;
            width: 100%;
            left: 0;
            bottom: 0;
            display: none;
            .line {
              display: block;
              width: 58%;
              margin: 0 auto;
              height: 3px;
              background-color: #f06742;
            }
          }
        }

        a.active .txt {
          color: #40404c;
          font-size: 18px;
        }

        a.active .bar {
          display: block;
        }
      }
    }
    .tt_com {
      line-height: 45px;
      font-size: 14px;
      color: #a3a3ac;
      padding-left: 15px;
    }
  }
  .fenlei::-webkit-scrollbar {
    display: none;
  }
  .fenlei {
    position: absolute;
    top: 45px;
    left: 0px;
    width: 100%;
    height: 345px;
    background-color: #fff;
    z-index: 1000;
    padding: 15px;
    overflow-y: auto;
    border-bottom: 1px solid #e8e8e8;
    border-top: 0;
    .tt_box {
      display: flex;
      flex-wrap: wrap;
      a {
        margin: 0 12px 16px 0;
        display: inline-block;
        width: 102px;
        height: 32px;
        border-radius: 4px;
        text-align: center;
        line-height: 32px;
        font-size: 16px;
        background-color: #f3f4f5;
        color: #40404c;
      }
    }
  }
}
</style>

